<head><meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1">
<meta charset=utf-8>
<style>
body { margin: 0px; }
canvas { width:100%; height:100%; overflow: hidden; }
</style>
<script type="text/javascript" src="../h3du_min.js"></script>
<script type="text/javascript" src="../extras/frame.js"></script>
<script type="text/javascript" src="demoutil.js"></script>
</head>
<body>
<canvas id=canvas></canvas>
<div style="position:absolute;left:0;top:0;width:25%"></div>
<script id="demo">
/* global H3DU */
// <!--
/*
 Any copyright to this file is released to the Public Domain.
 http://creativecommons.org/publicdomain/zero/1.0/
 If you like this, you should donate
 to Peter O. (original author of
 the Public Domain HTML 3D Library) at:
 http://peteroupc.github.io/
*/

function ellipseArc(x,y,radiusX,radiusY,start,sweep) {
  var abssweep=sweep
  var sweepdir=(sweep<0) ? -1 : 1
  var sweepSegments=(abssweep>Math.PI*0.5 &&
    abssweep<=Math.PI*2) ? abssweep*0.25 : Math.PI*0.5;
  var arcstart=start
  var curves=[]
  while(abssweep>0) {
  var arcangle=Math.min(sweepSegments,abssweep)
        var arcend=arcstart+arcangle*sweepdir
  var ca0=Math.cos(arcstart)
  var sa0=Math.sin(arcstart)
  var ca1=Math.cos(arcend)
  var sa1=Math.sin(arcend)
  abssweep-=arcangle
  arcstart+=arcangle*sweepdir
  var p0=[ca0,sa0,1]
  var p2=[ca1,sa1,1]
  var halfAngle=(Math.PI-arcangle)*0.5
  var weight=Math.sin(halfAngle)
  var dx=p2[0]-p0[0]
  var dy=p2[1]-p0[1]
  var dist=Math.sqrt(dx*dx+dy*dy)
  var m0=p0[0]+dx*0.5
  var m1=p0[1]+dy*0.5
  var dcx=m0
  var dcy=m1
  var mdist=Math.sqrt(dcx*dcx+dcy*dcy)
  var clen=1.0/mdist
  var p1dist=1.0/weight
        var p1=[
    (dcx*clen*p1dist),
       (dcy*clen*p1dist),
    weight
  ]
  p0[0]=x+p0[0]*radiusX
  p0[1]=y+p0[1]*radiusY
  p2[0]=x+p2[0]*radiusX
  p2[1]=y+p2[1]*radiusY
  p1[0]=(x+p1[0]*radiusX)*weight
  p1[1]=(y+p1[1]*radiusY)*weight
  curves.push(H3DU.BSplineCurve.fromBezierCurve(
    [p0,p1,p2],H3DU.BSplineCurve.DIVIDE_BIT))
   }
   return new H3DU.PiecewiseCurve(curves)
}

function ellipse(x,y,radiusX,radiusY) {
 return ellipseArc(x,y,radiusX,radiusY,0,Math.PI*2)
};

function drawCurve(ce,curve,lines) {
  "use strict";
  return ce.position(curve).evalCurve(H3DU.Mesh.LINES, lines||60);
}

function circleDesign() {
  "use strict";
  var ce = new H3DU.CurveBuilder();
  ce.attribute({
    "evaluate":function() {
      return [0, 0, 1];
    }
  },H3DU.Semantic.COLOR);
  drawCurve(ce,ellipse(0,0,1.5,1.8),240)
  drawCurve(ce,ellipse(0,0,1.6,1.7),240)
  drawCurve(ce,ellipse(0,0,1.7,1.6),240)
  drawCurve(ce,ellipse(0,0,1.8,1.5),240)
  ce.attribute({
    "evaluate":function() {
      return [1, 0, 0];
    }
  },H3DU.Semantic.COLOR);
  drawCurve(ce,ellipse(0,0,2.8,2.8),240)
  drawCurve(ce,ellipse(0,1.0,3.8,3.8),240)
  drawCurve(ce,ellipse(-1.0,0,4.8,4.8),240)
  drawCurve(ce,ellipse(1.1,1.4,5.8,5.8),240)
  return ce.toMeshBuffer();
}
var scene = new H3DU.Scene3D(document.getElementById("canvas"));
scene.setClearColor("white");
var sub = new H3DU.Batch3D()
   .perspectiveAspect(45, 1, 1000)
   .setLookAt([0, 0, 10]);
var group = new H3DU.ShapeGroup();
sub.getLights().setBasic();
var mesh = circleDesign();
group.addShape(new H3DU.Shape(mesh));
sub.addShape(group);

H3DU.renderLoop(function() {
  "use strict";
  scene.render(sub);
});
// -->
</script>
</body>
